<template>
  <div class="container">
    <div class="navclas" style="margin-top: 5px">
      <a class="" style="border-radius: 4px; width: 68%; padding: 0 10px">
        <div class="van-field__left-icon" style="padding-top: 5px">
          <i
            class="van-icon van-icon-search"
            style="height: 1.1rem; color: #686869"
          ></i>
        </div>
        <input
          v-model="filter_name"
          type="search"
          placeholder="请输入产品名称"
          ref="inpt"
          style="font-size: 14px"
          class="van-field__control"
          @search="init"
        />
      </a>
      <a
        @click="publish"
        style="border-radius: 4px; width: 30%; margin-left: 2%"
        class="is-active"
        ><span style="font-size: 14px">我要发布</span></a
      >
    </div>
    <div style="width: 100%; padding: 10px 15px">
      <ul style="display: flex; width: 100%; justify-content: space-between">
        <li style="width: 30%">
          <img :src="n_develponet" alt="" style="width: 100%" />
        </li>
        <li style="width: 30%" @click="$router.push('/info/my-used')">
          <img :src="er_develpoent" alt="" style="width: 100%" />
        </li>
        <li style="width: 30%" @click="$router.push('/info/my-rent')">
          <img :src="zu_develepoent" alt="" style="width: 100%" />
        </li>
      </ul>
    </div>
    <!-- <div style="width: 100%; height: 7px; background: rgb(235, 235, 235)"></div> -->
    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="(item, index) in list" :key="index" :title="item">
          <van-row style="padding-top: 15px" @click="itemClick(item.id)">
            <van-col>
              <img
                :src="getSrc(item)"
                style="object-fit: cover"
                width="100px"
                height="100px"
              />
            </van-col>
            <van-col
              style="
                width: calc(100% - 100px);
                height: 100px;
                padding-left: 10px;
                display: flex;
                justify-content: space-between;
                flex-direction: column;
              "
            >
              <div>
                {{ item.name }}
              </div>
              <div>
                {{ item.brief }}
              </div>
              <div style="width: 100%">
                <van-row type="flex" align="bottom">
                  <span
                    style="color: red"
                    :style="
                      item.price == 0 || item.price == null
                        ? 'font-size:12px;'
                        : ''
                    "
                    >￥{{
                      item.retailPrice == 0 || item.retailPrice == null
                        ? '面议'
                        : item.retailPrice
                    }}</span
                  >
                </van-row>
              </div>
            </van-col>
          </van-row>
          <van-divider
            :style="{
              color: 'rgba(187, 187, 187, 0.38)',
              borderColor: 'rgba(187, 187, 187, 0.38)',
              padding: '15px 16px 0px 16px',
            }"
          ></van-divider>
          <van-row
            type="flex"
            justify="space-between"
            style="height: 36px"
            align="center"
          >
            <van-col style="padding-left: 10px">
              <span style="font-size: 12px; color: #ee3f00">{{
                item.isOnSale ? '已上线' : '待审核'
              }}</span>
            </van-col>
            <van-col>
              <div style="padding-right: 4px">
                <!-- <span class="corner-span" @click="updateStatus(item.id)"
                  >编辑</span
                >-->

                <span style="margin-left: 10px"></span>
                <span class="corner-span" @click="deleteUsed(item.id)"
                  >删除</span
                >
              </div>
            </van-col>
          </van-row>
          <div
            style="height: 7px; width: 100%; background: #f0f1f4"
            v-show="userId != -1"
          />
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import {
  Search,
  Row,
  Col,
  DropdownMenu,
  DropdownItem,
  List,
  Uploader,
  Popup,
  Area,
  Divider,
  Toast,
} from 'vant';
import {
  deletem,
  authInfo,
  storedel,
  liant,
  mainct,
  qustores,
} from '@/api/api';
import areaList from '@/views/user/module-address-edit/area_all.json';
import logo_default from '@/assets/images/logo.jpg';
import scrollFixed from '@/mixin/scroll-fixed';
import er_develpoent from '@/assets/images/er_develpoent.png';
import n_develponet from '@/assets/images/n_develponet.png';
import zu_develepoent from '@/assets/images/zu_develepoent.png';
import { getLocalStorage } from '@/utils/local-storage';

export default {
  name: 'myoplist',
  mixins: [scrollFixed],
  data() {
    return {
      userId: Number(getLocalStorage('userId').userId),
      er_develpoent,
      n_develponet,
      zu_develepoent,
      areaList: areaList,
      address: '全国地区',
      list: [],
      loading: false,
      finished: false,
      logo_default: logo_default,
      page: 0,
      limit: 10,
      sale: false,
      filter_name: '',
      area_code: '',
      in_class: -1,
      chosed_level: -1,
      classoptions: [],
      leveloptions: [],
      status: ['审核中', '已上线', '审核不通过', '已下架', '审核中', '审核中'],
      classId: 'USED.PUBLISH.CLASS',
      newLevelId: 'USED.PUBLISH.NEW.LEVEL',
      shenfen: '',
    };
  },

  watch: {
    $route(to, from) {
      if (
        this.$route.query.userId != null &&
        this.$route.query.userId != undefined &&
        this.$route.query.userId != ''
      ) {
        this.userId = this.$route.query.userId;
      }
      this.init();
    },
  },

  created() {
    this.found();
    this.initArea();
    this.initClassOption();
    this.initNewLevelOption();

    if (
      this.$route.query.userId != null &&
      this.$route.query.userId != undefined &&
      this.$route.query.userId != ''
    ) {
      this.userId = this.$route.query.userId;
      //this.area_code = '';
    }
  },

  methods: {
    found() {
      authInfo().then((res) => {
        this.shenfen = res.data.data.positionId;
      });
    },

    initArea() {
      let area = this.$store.getters.getArea;
      if (area.code != null) {
        this.area_code = area.code;
        this.address = area.city;
      }
    },

    getChosedLevel(level_value) {
      for (let i in this.leveloptions) {
        if (level_value == this.leveloptions[i].value) {
          if (level_value == -1) {
            return '';
          } else {
            return this.leveloptions[i].text;
          }
        }
      }
    },
    initClassOption() {
      // dicItems({
      //   groupId: this.classId,
      // })
      //   .then((res) => {
      //     let list = res.data.data.list;
      //     for (let i in list) {
      //       let opiton = {
      //         text: list[i].itemName,
      //         value: parseInt(list[i].itemValue),
      //       };
      //       this.classoptions.push(opiton);
      //     }
      //   })
      //   .catch(() => {});
    },
    initNewLevelOption() {
      // dicItems({
      //   groupId: this.newLevelId,
      // })
      //   .then((res) => {
      //     let list = res.data.data.list;
      //     for (let i in list) {
      //       let opiton = {
      //         text: list[i].itemName,
      //         value: parseInt(list[i].itemValue),
      //       };
      //       this.leveloptions.push(opiton);
      //     }
      //   })
      //   .catch(() => {});
    },
    updateStatus: function (id) {
      this.$router.push({ path: `/keepshop/adduct/${id}` });
    },
    deleteUsed: function (id, index) {
      let message = '确定要删除吗?';
      this.$dialog
        .confirm({
          message: message,
          cancelButtonText: '再想想',
        })
        .then(() => {
          if (
            this.shenfen != 6001 ||
            this.shenfen != 2001 ||
            this.shenfen != 6004
          ) {
            storedel({
              shopGoodId: id,
            })
              .then((res) => {
                this.list.splice(index, 1);
                return this.$dialog.alert({
                  message: '删除成功',
                });
              })
              .catch((err) => {
                //return this.$dialog.alert({ message: '删除失败' });
                this.$dialog.alert({
                  message: err.errmsg,
                });
              });
          } else {
            deletem({
              shopGoodId: id,
            })
              .then((res) => {
                this.list.splice(index, 1);
                return this.$dialog.alert({
                  message: '删除成功',
                });
              })
              .catch((err) => {
                //return this.$dialog.alert({ message: '删除失败' });
                this.$dialog.alert({
                  message: err.errmsg,
                });
              });
          }
        });
    },
    publish() {
      qustores({ userId: this.userId })
        .then((res) => {
          // if (!res.data.data.status == 0 ? false : true) {
          //   Toast('店铺尚未授权！');
          //   return;
          // }
          this.$router.push('/keepshop/adduct/0');
        })
        .catch((err) => {
          Toast(err.data.errmsg);
          return;
        });
    },
    itemClick(id) {
      this.$router.push(`/raw/material-detail?id=${id}`);
    },
    getSrc(item) {
      let image = logo_default;
      if (item.gallery.length != 0) {
        image = item.gallery[0];
      }
      return image;
    },
    addConfirm(e) {
      if (e[0].code == '100000') {
        this.area_code = '';
        this.address = '全国地区';
      } else {
        this.area_code = e[1].code;
        this.address = e[1].name;
      }
      this.show = false;
      this.changeItem();
      this.$refs.area_item.toggle();
    },
    hideAreaItem() {
      this.$refs.area_item.toggle();
    },
    changeItem() {
      this.page = 0;
      this.list = [];
      this.onLoad();
    },
    init() {
      this.page = 0;
      this.list = [];

      // this.onLoad();
    },

    onLoad() {
      // if (this.userId == -1) {
      //   this.loading = false;
      //   this.finished = true;
      //   return;
      // }
      // if (this.page != 0 && this.list.length < 10) {
      //   this.page = 0;
      //   this.list = [];
      // }
      if (
        this.shenfen != 6001 ||
        this.shenfen != 2001 ||
        this.shenfen != 6004
      ) {
        this.page++;
        mainct({ page: this.page, limit: 10 })
          .then((res) => {
            console.log(res.data.data.list);
            this.list.push(...res.data.data.list);
            this.loading = false;
            this.finished = res.data.data.page >= res.data.data.pages;
          })
          .catch((e) => {
            this.page--;
            this.loading = false;
            this.finished = true;
          });
      } else {
        this.page++;
        liant({ page: this.page, limit: 10 })
          .then((res) => {
            console.log(res.data.data.list);
            this.list.push(...res.data.data.list);
            this.loading = false;
            this.finished = res.data.data.page >= res.data.data.pages;
          })
          .catch((e) => {
            this.page--;
            this.loading = false;
            this.finished = true;
          });
      }
    },
  },
  components: {
    [Search.name]: Search,
    [Row.name]: Row,
    [Col.name]: Col,
    [List.name]: List,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [Divider.name]: Divider,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
  },
};
</script>

<style lang="scss" scoped>
/* .van-search{
  background: rgb(255, 255, 255);
    margin-bottom: -10px;
} */
/deep/ .van-picker__cancel,
/deep/ .van-picker__confirm {
  color: #ee3f00;
}

.van-search__content--round {
  border-radius: 0px !important;
}

.select_area /deep/ .van-picker__toolbar {
  width: 100%;
  position: absolute;
  bottom: -44px;
}

.select_area /deep/ .van-picker__columns {
  margin-bottom: 44px;
}

.van-cell >>> .van-field__control[type='search'] {
  height: 30px;
}

.corner-span {
  width: 40px;
  height: 20px;
  // background-color: #EE3F00;
  border: 1px solid #ee3f00;
  border-radius: 5px;
  font-size: 12px;
  padding: 2px 8px;
}

.spanafter {
  position: relative;
  padding: 0 8px;
  line-height: 18px;
}

.spanafter::after {
  position: absolute;
  top: 50%;
  right: -4px;
  margin-top: -5px;
  border: 3px solid;
  border-color: transparent transparent currentColor currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0.8;
  content: '';
}

.address {
  text-align: center;
  height: 36px;
  line-height: 36px;
  color: #323233;
  font-size: 15px;
}

.container {
  background-color: white;

  .van-row {
    padding: 0px 16px;

    .van-row {
      padding: 0px;
    }
  }
}

.van-divider {
  margin: 0px;
  padding-top: 15px;
}

.van-search {
  padding: 0px;
}

.title {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  color: #969799;
  font-size: 12px;
  font-weight: normal;
  margin-top: -4px;
}
.navclas {
  display: flex;
  height: 50px;
  background-color: white;
  font-weight: bolder;
  padding: 0 15px;
  padding-top: 10px;
  box-sizing: border-box;

  > a {
    border: 1px solid #0397fb;

    // flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .is-active {
    color: white;
    background-color: #0397fb;
  }
}
.publish {
  line-height: 40px;
  width: auto;
  text-align: end;
}

.publish span {
  width: auto;
  height: 30px;
  background-color: #ee3f00;
  border: 1px solid #ee3f00;
  border-radius: 4px;
  font-size: 13px;
  padding: 5px 6px;
  color: white;
}

.van-cell {
  padding: 0px;
}

.cell-span {
  color: #969799;
  font-size: 12px;
}
</style>
